<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>资源管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-input v-model="select_word" style="width: 300px" placeholder="请输入查询关键字" ></el-input>
        <el-button  icon="search"  plain  @click="search">搜索</el-button>
        <el-button @click="addresource = true">添加权限资源</el-button>
        <div style="margin-top: 20px">
            <el-table  :data="tableData"  style="width: 100%">
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column property="description" label="资源名称"></el-table-column>
                <!--<el-table-column property="userId" label="资源标识"></el-table-column>-->
                <!--<el-table-column property="address" label="资源类型"></el-table-column>-->
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="danger"
                            icon="delete"
                            @click="delOne(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            :page-size="15"
            layout="prev, pager, next, jumper"
            :total="count">
        </el-pagination>
        <el-dialog title="添加权限" :visible.sync="addresource" size="small" >
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="资源名称" prop="permission">
                    <el-input v-model="ruleForm.permission"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="ruleForm.description"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                rules: {
                    permission: [
                        {required: true, message: '请输入上报人名字', trigger: 'blur'},
                    ],
                    description: [
                        {required: true, message: '请输入其他备注', trigger: 'blur'},
                    ],
                },
                formLabelWidth: '120px',
                select_word:'',
                adduser:false,
                addresource:false,
                pageNum:0,
                count:1,
                count1:1,
                form:{
                    username:'',
                    password:''
                },
                tableData: [{
                    description:'',
                    permissionId:'',
                }],
                ruleForm:{
                    permission:'',
                    description:'',
                },
            }
        },
        created(){
            this.getData();
        },
        methods: {
            getData(){
                this.$axios.get('/text/permission/findAllRolepagination?pageNum=1').then((res) => {
                    if(res.data.code==403){
                        this.$router.push('/login');
                    }
                    this.count= res.data.data.total;
                    this.tableData= res.data.data.list;
                })
            },
            search(select_word){
                this.page=false;
                this.$axios.get('text/permission/queryfuzzy?pageNum=1'+'&keyword='+this.select_word).then((res) => {
                    this.tableData= res.data.data;
                    this.count1=res.data.data.total
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('text/permission/createPermission?' +
                            "&permission="+ this.ruleForm.permission+
                            "&description=" + this.ruleForm.description
                        ).then((res) => {
                            if(res.data.code==200)
                            {
                                this.$message.info('添加成功');
                                this.addresource=false;
                            }

                            this.getData()

                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            delOne(index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete('text/permission/deletePermission?' +
                        'permissionId=' + row.permissionId
                    ).then((res) => {
                        this.getData(),
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addUser(){
                this.$axios.post('text/user/createUser?'+
                    'username='+this.form.username+
                    '&password='+this.form.password
                ).then((res)=>{

                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(pageNum) {
                this.$axios.get('text/permission/findAllRole?pageNum='+pageNum).then((res) => {
                    this.tableData= res.data.data.list;
                })
            },
        }
    }
</script>

<style scoped>

</style>
